<template>
  <div class="global_bg">
    <VantNavigationBar title="我发布的"></VantNavigationBar>
    <van-card
      v-for="product in myProductsList"
      :key="product.product_id"
      :price="product.product_price"
      :desc="product.product_dsc"
      :title="product.product_name"
      :thumb="'http://localhost:8090/' + product.product_imge"
    >
      <template #footer>
        <van-button type="danger" @click="deletePro(product.product_id)"
          >删除</van-button
        >
      </template>
    </van-card>
    <div v-if="myProductsList.length === 0">
      <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="还没有商品"
      />
    </div>
  </div>
</template>

<script>
import VantNavigationBar from '@/components/Navbar'
import mine from '@/api/mine.js'
import { Card, Empty, showSuccessToast, Dialog, showConfirmDialog } from 'vant'
import { ref } from 'vue'

export default {
  components: {
    VantNavigationBar,
    [Card.name]: Card,
    [Empty.name]: Empty,
    [showSuccessToast.name]: showSuccessToast,
    [Dialog.name]: Dialog,
    [showConfirmDialog.name]: showConfirmDialog,
  },
  setup() {
    const myProductsList = ref([])

    mine.productbyownApi().then((res) => {
      if (res.status === 200) {
        myProductsList.value = res.data
      }
    })

    // 删除产品
    const deletePro = (product_id) => {
      showConfirmDialog({
        title: '是否删除？',
        message: '删除后将无法看到被别人看到！',
      })
        .then(() => {
          const productId = { product_id: product_id }
          // 调用删除接口
          mine.failureTage(productId).then((res) => {
            if (res.status === 200) {
              showSuccessToast(res.msg)
              window.location.reload()
            }
          })
        })
        .catch(() => {
          // 取消删除
        })
    }

    return {
      myProductsList,
      deletePro,
    }
  },
}
</script>

<style></style>
